<template>
  <div class="danmu-container">
    <div v-for="(danmu, index) in danmus" :key="index" class="danmu" :style="danmu.style">
      {{ danmu.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      danmus: [],
    };
  },
  methods: {
    addDanmu(text) {
      const danmu = {
        text,
        style: {
          top: `${Math.random() * 80 + 10}%`,
          animationDuration: `${Math.random() * 10 + 5}s`,
        },
      };
      this.danmus.push(danmu);
      setTimeout(() => {
        this.danmus.shift();
      }, parseFloat(danmu.style.animationDuration) * 1000);
    },
  },
};
</script>

<style scoped>

.danmu-container {
  position: relative;
  width: 800px; /* 调整为适合你的需求的宽度 */
  height: 400px; /* 调整为适合你的需求的高度 */
  overflow: hidden;
}
.danmu {
  position: absolute;
  white-space: nowrap;
  font-size: 18px;
  color: white;
  text-shadow: 1px 1px 2px #000;
  animation: danmuAnimation linear;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

@keyframes danmuAnimation {
  to {
    transform: translateX(-100%);
  }
}
</style>
